<template>
  <div class="main">
    <el-row :gutter="20">
      <el-col :span="4">
        <p class="label-form"> 用户手机号：</p>
        <el-input v-model="queryParams.phone"  placeholder="请输入品牌名称"></el-input>
      </el-col>
      <!--      <el-col :span="4">-->
      <!--        <p class="label-form"> 状态：</p>-->
      <!--        <el-select style="width: 100%;" clearable v-model="queryParams.status" placeholder="请选择">-->
      <!--          <el-option-->
      <!--            v-for="item in messageType"-->
      <!--            :key="item.dictValue"-->
      <!--            :label="item.dictLabel"-->
      <!--            :value="Number(item.dictValue)">-->
      <!--          </el-option>-->
      <!--        </el-select>-->
      <!--      </el-col>-->
      <el-col :span="4">
        <p class="label-form"> 申请类型：</p>
        <el-select style="width: 100%;" clearable v-model="queryParams.type" placeholder="请选择">
          <el-option
            v-for="item in optionsType"
            :key="item.dictValue"
            :label="item.dictLabel"
            :value="Number(item.dictValue)">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="6">
        <p class="label-form"></p>
        <el-button type="primary" @click="getSelect"  icon="el-icon-search">搜索</el-button>
        <el-button type="warning" @click="resert" icon="el-icon-refresh-right">重置</el-button>
      </el-col>
    </el-row>

    <!--    <el-row :gutter="20" style="margin-top: 10px">-->
    <!--      <el-col :span="4">-->
    <!--        <el-button @click="addShop" type="primary" icon="el-icon-plus">新增</el-button>-->
    <!--      </el-col>-->
    <!--    </el-row>-->

    <el-table :data="tableData"
              row-key="id"
              max-height="600"
              :expand-row-keys="expandedRowKeys"
              @expand-change="handleExpand"
              border style="margin-top: 30px">
      <el-table-column align="center" prop="id" min-width="100" label="ID"></el-table-column>
      <el-table-column prop="orderSn" min-width="200" label="订单号"></el-table-column>
      <el-table-column prop="carModel" min-width="200" label="车辆信息"></el-table-column>
      <el-table-column prop="licensePlate" min-width="200" label="车牌号"></el-table-column>
      <el-table-column prop="userPhone" min-width="200" label="手机号"></el-table-column>
      <el-table-column prop="ext" width="200"  label="救援位置 ">
        <template slot-scope="scope">

<!--          <p> {{ scope.row.latitude }} / {{ scope.row.longitude }}</p>-->
          <el-button icon="el-icon-view" @click="viewShop(scope.row)" type="primary" size="mini">查看</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="img" min-width="200"  label="车辆照片">
        <template slot-scope="scope">
          <el-image style="height: 40px" :src="scope.row.carImg"></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="storeName" width="200"  label="店铺名称 "></el-table-column>
      <el-table-column prop="storeAddress" width="200"  label="店铺地址 "></el-table-column>
      <el-table-column prop="ext" width="200"  label="救援类型 "></el-table-column>
      <el-table-column prop="ext" width="200"  label="现场照片 ">
        <template slot-scope="scope">
          <span v-if="scope.row.status !==2">处理中暂无数据</span>
          <el-image
            v-else
            style="height: 50px"
            v-for="(item,index) in scope.row.uploadImg"
            :key="index"
                    :src="item"></el-image>
        </template>
      </el-table-column>

      <el-table-column prop="status" width="200"  label="救援状态 ">
        <template slot-scope="scope">
          {{ status(scope.row.status) }}
        </template>
      </el-table-column>
      <el-table-column min-width="180"  prop="status" label="创建时间">
        <template slot-scope="scope">
          {{ parseTime(scope.row.createTime) }}
        </template>
      </el-table-column>


      <el-table-column fixed="right" width="220" align="center" label="操作">
        <template slot-scope="scope">

          <el-tag type="warning" v-if="scope.row.status ===0">待审核</el-tag>
          <el-tag type="primary" v-if="scope.row.status ===1">处理中</el-tag>
          <el-tag type="success" v-if="scope.row.status ===2">已完成</el-tag>
          <el-tag type="danger" v-if="scope.row.status ===3">已取消</el-tag>

        </template>
      </el-table-column>
    </el-table>


    <el-dialog
      title="救援位置"
      :visible.sync="dialogVisible"
      width="900px"
      :before-close="handleClose">
      <baidu-map
        class="map"
        @click="setMark"
        style="display: flex; flex-direction: column"
        :center="center"
        :zoom="15"
        :scroll-wheel-zoom="true">
        <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
        <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
        <bm-marker
          :position="mark"
          :dragging="true" animation="BMAP_ANIMATION_BOUNCE">
          <bm-label
            :content="content"
            :labelStyle="{color: 'red', fontSize : '12px'}"
            :offset="{width: -35, height: 30}"/>
        </bm-marker>
        <bm-driving
          :start="center"
          :end="mark"
          :auto-viewport="true"
          policy="BMAP_DRIVING_POLICY_LEAST_DISTANCE"
          :panel="false"
          :location="mark"
        >
        </bm-driving>

      </baidu-map>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>
    <div class="box-pager">
      <pagination
        v-show="pager.total>0"
        :total="pager.total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getListsPage"
      />
    </div>
    <div class="safe"></div>


  </div>
</template>

<script>
import {parseTime} from "@/utils/ruoyi";
import axios from "axios";
import {
  applicationList,
  getDict,
  getEquipment,
  getProList,
  getRequestArray,
  requestList3,
  updateRequestStatus,
  userTyreList
} from "@/api/apiFox";

export default {
  data() {
    return {
      currentPage1: 5,
      value1: '',
      pager: {
        total: 10
      },
      formData: {},
      form: {},
      dialogVisible: false,
      center: {lng: 117.404, lat: 35.915},
      isEdit: false,
      payStatus: false,
      isConsumables: false,
      dialogVisibleTyre: false,
      mark: {lng: '', lat: ''},
      content: "",
      materialScienceList: [
        {id: 1, name: "螺栓", num: "1", price: "25.15"}
      ],
      tyreList: [],
      tableData: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        phone: "",
        status: "",
        type: ""
      },
      loading: false,
      messageType: [],
      expandedRowKeys: [],
      options: [
        {value: 0, label: '待审核'},
        {value: 1, label: '已审核'},
        {value: 2, label: '已完成'},
        {value: 3, label: '已驳回'},
      ],
      postions: [
        {value: 1, label: '左前'},
        {value: 2, label: '右前'},
        {value: 3, label: '左后'},
        {value: 4, label: '右后'},
      ],
      optionsType: [],
      productList: []
    }
  },
  created() {
    this.getDictList('apply_status')
    this.getProductArray()
    this.getDictList2('extension_request_type')
  },
  mounted() {
    this.getLists(this.queryParams)
  },
  methods: {
    getProductArray() {
      getProList().then(res => {
        console.log(res)
        this.productList = res
      })
    },
    getDictList(item) {
      getDict(item).then(res => {
        console.log(res)
        this.messageType = res
      })
    },
    getDictList2(item) {
      getDict(item).then(res => {
        this.optionsType = res
      })
    },
    getListsPage(e) {
      this.queryParams.pageNum = e.page
      this.queryParams.pageSize = e.limit
      this.getLists(this.queryParams)
    },
    resert() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        phone: "",
        status: "",
        type: ""
      }
      this.getLists(this.queryParams)
    },
    getSelect() {
      this.getLists(this.queryParams)
    },
    parseTime,
    getLists(params) {
      applicationList(params).then(res => {
        console.log(res)
        if (res.rows && res.rows.length>0){
          let array = res.rows
          array.forEach(value=>{
            if (value.adminImg){
              let s = value.adminImg.split(',')
              if (s && s.length>0){
                value.uploadImg = s
              }else{
                value.uploadImg = []
              }
            }else{
              value.uploadImg = []
            }
          })
          this.pager.total = res.total
          this.tableData = array
          console.log(array)
        }else{
          this.pager.total = res.total
          this.tableData = []
        }

      })
    },

    handleExpand(row, expandedRows) {
      this.loading = true
      const currentRowId = row.id;
      this.tyreForm = row
      const index = this.expandedRowKeys.indexOf(currentRowId);
      if (index === -1) {

        this.expandedRowKeys = [currentRowId];
      } else {
        this.expandedRowKeys = [];
      }
      console.log(row)
      this.getTyre(row.carId)
    },

    getTyre(item) {
      userTyreList({carId: item}).then(res => {
        console.log(res)
        this.tyreList = res.data
        this.loading = false
      })
    },

    addType(e) {
      this.formData = {}
      this.dialogVisibleTyre = true
    },

    viewReject(row) {
      this.$alert(row.reply, '驳回理由', {
        confirmButtonText: '关闭',
        callback: action => {

        }
      });

    },


    settlement(row) {
      this.payStatus = true
    },

    addConsumables() {
      this.isConsumables = true
    },

    handleCloseTyre() {
      this.dialogVisibleTyre = false
    },
    handleClosePayStatus() {
      this.payStatus = false
    },
    setMark(e) {
      console.log(e)
      this.center= {lng: e.point.lng, lat: e.point.lat}
    },
    updateShop(item) {
      this.dialogVisible = true
      this.form = item
      this.mark = {lng: item.longitude, lat: item.latitude}
      this.center = {lng: item.longitude, lat: item.latitude}
      this.isEdit = true
    },
    viewShop(item) {
      this.dialogVisible = true
      this.form = item
      this.content = item.storeName || '暂无数据'
      this.mark = {lng: item.longitude, lat: item.latitude}
      this.center = {lng: item.longitude, lat: item.latitude}
      this.isEdit = false
    },
    addShop() {
      this.dialogVisible = true
      this.form = {}
      this.isEdit = false
    },
    deleteTyre(item) {
      console.log(item)
    },
    position(val) {
      switch (val) {
        case 1: {
          return '左前'
        }
        case 2: {
          return '右前'
        }
        case 3: {
          return '左后'
        }
        case 4: {
          return '右后'
        }
      }
    },

    handleClose() {
      this.dialogVisible = false
    },
    status(val) {
      switch (val) {
        case 0: {
          return '待审核'
        }
        case 1: {
          return '已审核'
        }
        case 2: {
          return '已完成'
        }
        case 3: {
          return '已驳回'
        }

      }
    },
    requestType(val) {
      let s = this.optionsType.filter(value => {
        return Number(value.dictValue) === val
      })
      if (s && s.length > 0) {
        return s[0].dictLabel
      } else {
        return '暂无数据'
      }
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    }
  },
}
</script>


<style scoped lang="scss">
.map {
  width: 100%;
  height: 500px;
}

.main {
  width: 100%;
  min-height: 100vh;
  padding: 30px;
  box-sizing: border-box;

  .label {
    font-size: 14px;
    height: 20px;
    margin-bottom: 5px;
  }
}

.grid-content {
  height: 40px;
  text-align: right;
  line-height: 40px;
}

.bg-purple {
  font-size: 14px;
  color: #3f3f3f;
}
</style>
